<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>多个box场景</title>
    <link rel="stylesheet" href="https://unpkg.com/normalize.css@8.0.1/normalize.css" />
    <script src="https://unpkg.com/three@0.109.0/build/three.js"></script>
    <script src="https://unpkg.com/stats.js@0.17.0/build/stats.min.js"></script>
    <script src="https://unpkg.com/dat.gui@0.7.6/build/dat.gui.js"></script>
    <script src="https://unpkg.com/three@0.109.0/examples/js/loaders/GLTFLoader.js"></script>
    <script src="https://unpkg.com/three@0.109.0/examples/js/controls/OrbitControls.js"></script>
    <script src="../dist/anikyu.js"></script>
</head>

<body>
    <div id="Stats-output"></div>
    <div id="WebGL-output"></div>
    <script>
        //初始化指示器
        function initStats() {
            // var stats = new Stats();
            // stats.setMode(0);
            // stats.domElement.style.position = 'absolute';
            // stats.domElement.style.position = '0px';
            // stats.domElement.style.position = '0px';
            // document.getElementById("Stats-output").appendChild(stats.domElement);
            // return stats;
        }
        //初始化场景
        function init() {
            var stats = initStats();
            //场景、摄像机、渲染器
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
            var renderer = new THREE.WebGLRenderer(
                {
                    antialias: true,
                    alpha: true,
                    shadowMapEnabled: true
                }
            );

            renderer.setClearColor(0xffffff);
            renderer.setClearAlpha(0.0)
            renderer.setSize(window.innerWidth, window.innerHeight);
            //轴向指示
            // var axes = new THREE.AxisHelper(5);
            // scene.add(axes);

            var lightGroup = new THREE.Group();

            scene.add(lightGroup);

            camera.position.set(-40, 60, 40);
            camera.lookAt(scene.position);
            scene.add(camera);
            document.getElementById("WebGL-output").appendChild(renderer.domElement);

            //轨道控制器
            var controls = new THREE.OrbitControls(camera)
            controls.autoRotate = true
            window.controls = controls

            function renderScene() {
                // stats.update();
                requestAnimationFrame(renderScene);
                renderer.render(scene, camera);
            }

            //场景雾
            scene.fog = new THREE.FogExp2(0xffffff, 0.0002);

            //监听窗口尺寸
            function onResize() {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
            }
            window.addEventListener('resize', onResize, false);

            renderScene();

            window.scene = scene;
            window.lightGroup = lightGroup;
        }
        function setLights() {
            //点光源
            var spotLight = new THREE.SpotLight(0x806f00, 0.1);
            spotLight.position.set(-40, 60, -10);
            spotLight.castShadow = true;
            lightGroup.add(spotLight);

            var light1 = new THREE.PointLight(0xEEFF66, 0.5)
            light1.position.set(30, 31, -10);
            lightGroup.add(light1);

            // var light2 = new THREE.DirectionalLight(0x37FFFA, 0.6);
            // light2.position.set(-40, 28, 16);
            // lightGroup.add(light2);

            var light3 = new THREE.AmbientLight(0x888888);
            lightGroup.add(light3);

            var light4 = new THREE.PointLight(0xB8FFB8, 0.1);
            light4.position.set(10, 20, 30);
            lightGroup.add(light4);
        }

        window.boxes = []
        function addBox() {
            let aBox = new THREE.BoxGeometry(10, 0.1, 10);
            // let aBox = new THREE.PlaneGeometry(10, 10);
            let material = new THREE.MeshPhongMaterial({
                color: 0x40bf8c,
                // metalness: 1,
                // roughness: 0.8,
                // envMapIntensity: 1.0,
                reflectivity: 1,
                shininess: 300,
            })

            let i = 0;
            while (i < 11) {
                for (var j = 0; j < 11; j++) {
                    let boxMesh = new THREE.Mesh(aBox, material)
                    boxMesh.position.x = (-5 + i) * 10
                    boxMesh.position.z = (-5 + j) * 10
                    scene.add(boxMesh)
                    window.boxes.push(boxMesh)
                }
                i++
            }


            // material.envMap = new THREE.TextureLoader().load('../_res/env_map.jpg')

        }

        function autoRotateObject(obj3d) {
            var deg1 = Math.PI / 180;
            obj3d.rotateY(0.5 * deg1);
        }

        function animate() {
            autoRotateObject(lightGroup);
            window.controls.update()
            requestAnimationFrame(animate)
        }

    </script>
    <script>
        window.boxes[0];
        document.addEventListener("DOMContentLoaded", () => {
            init();
            setLights();
            addBox();
            animate();

            let aniArr = [{
                props: { s: 0 }
            }, {
                easeType: 'elasticOut',
                duration: 4000,
                props: { s: 360 }
            }]

            for (let i = 0; i < window.boxes.length; i++) {
                (function (i) {
                    setTimeout(function () {
                        let obj = {}
                        let ani = new Anikyu(obj, aniArr)
                        ani.addEventListener(
                            'animate',
                            function (e) {
                                // console.log(e);
                                window.boxes[i].rotateZ((e.detail.frameDelta.s) * Math.PI / 180)
                                // window.boxes[i].scale = new THREE.Vector3(1 + e.percent, 1, 1)
                                // window.boxes[i].position.y+=e.frameDelta.s*0.01
                                // window.boxes[i].translateY((e.detail.frameDelta.s) * 0.1)

                            }
                        )
                        ani.addEventListener(
                            'finish',
                            function (e) {
                                if (e.detail.stageIndex === 1) {
                                    ani.jump(0)
                                }
                            }
                        )
                        document.addEventListener("visibilitychange", () => {
                            if (document.hidden) {
                                // 页面被挂起
                                ani.pause()
                            }
                            else {
                                ani.resume()
                                // 页面呼出
                            }
                        });
                    }, 10 * i)
                })(i)
            }
        })
    </script>
</body>

</html>